﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FooTable - jQuery plugin for responsive HTML tables</title>
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
	<link href="../css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css"/>
    <link href="css/footable-demos.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script>
        if (!window.jQuery) { document.write('<script src="js/jquery-1.9.1.min.js"><\/script>'); }
    </script>
    <script src="../js/footable.js?v=2-0-1" type="text/javascript"></script>
	<script src="js/bootstrap-tab.js" type="text/javascript"></script>
    <script src="js/demos.js" type="text/javascript"></script>
    <style type="text/css">
        #console {
            margin-top: 5px;
            padding: 0;
            width: 95%;
            height: 100px;
            font-size: 10px;
            font-family: courier new;
        }
    </style>
</head>
<body>
	<div class="demo-container">
        <ul class="breadcrumb">
            <li><a href="http://fooplugins.com/plugins/footable-jquery/-jquery/">FooTable</a> <span class="divider">&raquo;</span></li>
            <li><a href="index.htm">Demos</a> <span class="divider">&raquo;</span></li>
            <li class="active">FooTable API</li>
        </ul>
        <div class="alert">
            Access FooTable functions programmatically
        </div>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#demo">Demo</a></li>
			<li><a href="#docs">Docs</a></li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane active" id="demo">
                <a class="table_redraw" href="#call">redraw</a> |
                <a class="random_row_toggle" href="#call">toggle a random row</a>
                <textarea id="console"></textarea>
                <table style="width:300px" class="table demo table-bordered" data-filter="#filter" data-page-size="5" data-page-previous-text="prev" data-page-next-text="next">
                    <thead>
                    <tr>
                        <th data-toggle="true">
                            Name
                        </th>
                        <th>
                            Actions
                        </th>
                        <th data-hide="all">
                            DOB
                        </th>
                        <th data-hide="all">
                            Status
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>Isidra</td>
                        <td class="row_actions"><a href="#toggle">toggle</a> | <a href="#delete">delete</a></td>
                        <td data-value="78025368997">22 Jun 1972</td>
                        <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
                    </tr>
                    <tr>
                        <td>Shona</td>
                        <td class="row_actions"><a href="#toggle">toggle</a> | <a href="#delete">delete</a></td>
                        <td data-value="370961043292">3 Oct 1981</td>
                        <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
                    </tr>
                    <tr>
                        <td>Granville</td>
                        <td class="row_actions"><a href="#toggle">toggle</a> | <a href="#delete">delete</a></td>
                        <td data-value="-22133780420">19 Apr 1969</td>
                        <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
                    </tr>
                    <tr>
                        <td>Easer</td>
                        <td class="row_actions"><a href="#toggle">toggle</a> | <a href="#delete">delete</a></td>
                        <td data-value="250833505574">13 Dec 1977</td>
                        <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
                    </tr>
                    <tr>
                        <td>Maple</td>
                        <td class="row_actions"><a href="#toggle">toggle</a> | <a href="#delete">delete</a></td>
                        <td data-value="694116650726">30 Dec 1991</td>
                        <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
                    </tr>
                    <tr>
                        <td>Maxine</td>
                        <td class="row_actions"><a href="#toggle">toggle</a> | <a href="#delete">delete</a></td>
                        <td data-value="561440464855">17 Oct 1987</td>
                        <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
                    </tr>
                    <tr>
                        <td>Lorraine</td>
                        <td class="row_actions"><a href="#toggle">toggle</a> | <a href="#delete">delete</a></td>
                        <td data-value="437400551390">11 Nov 1983</td>
                        <td data-value="2"><span class="status-metro status-disabled" title="Disabled">Disabled</span></td>
                    </tr>
                    <tr>
                        <td>Lizzee</td>
                        <td class="row_actions"><a href="#toggle">toggle</a> | <a href="#delete">delete</a></td>
                        <td data-value="-257733999319">1 Nov 1961</td>
                        <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
                    </tr>
                    <tr>
                        <td>Judi</td>
                        <td class="row_actions"><a href="#toggle">toggle</a> | <a href="#delete">delete</a></td>
                        <td data-value="362134712000">23 Jun 1981</td>
                        <td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td>
                    </tr>
                    <tr>
                        <td>Lauri</td>
                        <td class="row_actions"><a href="#toggle">toggle</a> | <a href="#delete">delete</a></td>
                        <td data-value="500874333932">15 Nov 1985</td>
                        <td data-value="3"><span class="status-metro status-suspended" title="Suspended">Suspended</span></td>
                    </tr>
                    </tbody>
                </table>
			</div>
			<div class="tab-pane" id="docs">
                <h3>FooTable API</h3>
                <p>You can access most of the FooTable functions very easily. First, get the FooTable object from your table, which is stored in the data:</p>
                <pre>var footable = $(&#39;.footable&#39;).data(&#39;footable&#39;);</pre>
                <p>And then call a function inside the FooTable object:</p>
                <pre>
//force FooTable to redraw itself
footable.redraw();

//delete a row
footable.removeRow(row_to_delete);</pre>
                <p>Some functions you may want to call include <code>resize, redraw, toggleDetail, removeRow, appendRow, createOrUpdateDetailRow, raise</code></p>
                <h4>Example code from demo</h4>
                <pre>
$(&#39;.row_actions a&#39;).click(function(e) {
    e.preventDefault();

    //get the FooTable object from the table
    var footable = $(this).parents(&#39;table:first&#39;).data(&#39;footable&#39;);

    //get the row we clicked on
    var $row = $(this).parents(&#39;tr:first&#39;);

    //determine the action we want to perform
    if ($(this).text() == &#39;delete&#39;) {
        if (confirm(&#39;are you sure?&#39;)) {
            footable.removeRow($row);
        }
    } else {
        footable.toggleDetail($row);
    }
});</pre>
		    </div>
	    </div>
    </div>
    <script type="text/javascript">
        $(function () {
            var counter = 0;
            $('table').footable({
                debug: true,
                log: function(message, type) {
                    counter++;
                    var console = $("#console");
                    if (counter > 1) console.append('\n');
                    console.append(counter + ': ' + message);
                    console[0].scrollTop = console[0].scrollHeight;
                }
            });

            $('.table_redraw').click(function(e) {
                e.preventDefault();
                var footable = $('.footable').data('footable');
                footable.redraw();
            });

            $('.random_row_toggle').click(function(e) {
                e.preventDefault();
                var trigger = $(this).data('trigger');

                var rows = $('table tbody tr:not(".footable-row-detail")');
                var rand = Math.floor(Math.random()*rows.length);
                var random_row = rows[rand];

                var footable = $('.footable').data('footable');
                footable.toggleDetail(random_row);
            });

            $('.row_actions a').click(function(e) {
                e.preventDefault();

                //get the FooTable object from the table
                var footable = $(this).parents('table:first').data('footable');

                //get the row we clicked on
                var $row = $(this).parents('tr:first');

                if ($(this).text() == 'delete') {
                    if (confirm('are you sure?')) {
                        footable.removeRow($row);
                    }
                } else {
                    footable.toggleDetail($row);
                }
            });
        });
    </script>
</body>
</html>
